<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>垂直对齐vertical-align</title>
    <style>
        div {
            font-size: 100px;
            height: 300px;
            background-color: aquamarine;
        }

        span {
            font-size: 40px;
            background-color: darkseagreen;
            /* 值1：不设置默认基线对齐 */
            /* vertical-align: baseline; */
            /* 值2：顶部对齐 */
            /* vertical-align: top; */
            /* 值3：底部对齐 */
            /* vertical-align: bottom; */
            /* 值4：居中对齐（使元素的中部与父元素的基线加上父元素 x-height（译注：x 高度）的一半对齐。） */
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div>
        文本垂直对齐 x <span>x橙子</span>
    </div>
</body>

</html>